import React, { useEffect, useState } from 'react';
import { Row, Col, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import "./Subscription.scss"
import Index from '../../../../../api/Inedx';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
interface Props {
    residentId: any,
}
interface DataType {
    key: number;
    name: string;
    id: number;
    doctor: string,
    team: string,
    package: string,
    startTime: string,
    overTime: string
}




function Subscription(props: Props) {
    let residentId = useSelector((state: any) => { return state.WTreducer.residentId })
    let navigate = useNavigate()
    let [list, setList]: any = useState()


    let getSelectResident = async () => {//获取签约详情
        let res = await Index.Resident.GetselectResident({ residentId })
        console.log(res);
    }
    let getQianYue = async () => {
        let res = await Index.Resident.GetQianYue()
        console.log(res);
        setList(res.data)
    }


    useEffect(() => {
        getSelectResident()
        getQianYue()
    }, [])

    let goDetail = () => { navigate('/index/sign-detail') }


    const columns: ColumnsType<DataType> = [
        {
            align: "center",
            title: '编号',
            dataIndex: 'id',
            key: 'id'
        },
        {
            align: "center",
            title: '签约机构',
            dataIndex: 'name',
            key: 'name',
        },
        {
            align: "center",
            title: '签约医生团队',
            dataIndex: 'team',
            key: 'team',
        },
        {
            align: "center",
            title: '签约医生',
            dataIndex: 'doctor',
            key: 'doctor',
        },
        {
            align: "center",
            title: '服务包',
            dataIndex: 'package',
            key: 'package',
        },
        {
            align: "center",
            title: '申请时间',
            dataIndex: 'startTime',
            key: 'startTime',
        },
        {
            align: "center",
            title: '到期时间',
            dataIndex: 'overTime',
            key: 'overTime',
        },
        {
            align: "center",
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <>
                    <a onClick={() => { goDetail() }}>查看详情</a>
                </>
            ),
        },
    ];
    const data: DataType[] = list















    return (
        <div className='subscription'>
            <div className='top'>
                <span className='title4'>当前签约信息</span><a>编辑</a>
                <Row gutter={[16, 16]} className="row">
                    <Col className="gutter-row" span={6}>
                        <div>签约编号&nbsp;&nbsp;{3}</div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <div>签约状态&nbsp;&nbsp;{"待审核"}</div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <div>签约机构&nbsp;&nbsp;{"哈哈卫生站"}</div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <div>签约团队&nbsp;&nbsp;{"张三团队"}</div>
                    </Col>
                </Row>
                <Row gutter={[16, 16]} className="row">
                    <Col className="gutter-row" span={6}>
                        <div>签约医生&nbsp;&nbsp;{"张三"}</div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <div>服务包&nbsp;&nbsp;{"老年人基础包"}</div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <div>签约周期&nbsp;&nbsp;{"1年"}</div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <div>费用&nbsp;&nbsp;{"¥120"}</div>
                    </Col>
                </Row>
                <Row gutter={[16, 16]} className="row">
                    <Col className="gutter-row" span={6}>
                        <div>签约类型&nbsp;&nbsp;{"首次签约"}</div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <div>申请时间&nbsp;&nbsp;{"2020/10/09"}</div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <div>生效日期&nbsp;&nbsp;{"2023/02/27"}</div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <div>签约备注&nbsp;&nbsp;{"无"}</div>
                    </Col>
                </Row>
            </div>
            <div className='bottom'>
                <span className='title5'>签约记录</span>
                <Table columns={columns} dataSource={data} className="table" pagination={false} />
            </div>
        </div>
    );
}

export default Subscription;